import About from "@/pages/about.vue";
import Home from "@/pages/home.vue";
import Message from "@/pages/message.vue";
import Detail from "@/pages/Detail.vue";
import { createRouter, createWebHistory,createWebHashHistory} from "vue-router";
const router=createRouter({
    history:createWebHistory(),
    routes:[
        {
            name:"guanyu",
            path:"/about",
            component:About
        },
        {
            name:"zhuye",
            path:"/home",
            component:Home
        },
        {
            name:"xinxi",
            path:"/message",
            component:Message,
            children:[
                {
                    name:"xiangqing",
                    // params请求时，需要再路径中指定占位
                    // path:"xiangqing/:id/:title/:context",
                    // 使用query传参，路径不需要占位处理
                    path:"xiangqing",
                    component:Detail,
                    // 需要传递的参数可以使用通过props进行传递，在子组件页面内，可以通过defineProps进行接收即可
                    // 使用props方式一，使用params传参可以直接定义props为true即可
                    // props:true
                    // 使用props的方式二,可以使用props函数进行传递
                    props(route){
                        console.log(route)
                        return route.query
                    }
                     // 使用props的方式三,可以使用props对象进行传递，此种方式有应用较少，
                    // props:{
                    //     id:"kljlkjlj01",
                    //     title:"母婴用品",
                    //     context:"奶粉，儿童玩具，儿童衣物"
                    // }
                }
            ]

        },
        {
            path:"/",
            redirect:"/message"
        }
    ]
})
export default router